<template>
    <div class="map-container">
        <div id="mapDiv" ref="mapDiv"></div>
        <div class="control-panel">
            <p>本示例演示如何在地图上测面。</p>
            <input type="button" value="开启" @click="openPolygonTool" />
            <input type="button" value="关闭" @click="closePolygonTool" />
            <input type="button" value="清除" @click="clearPolygon" />
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    name: 'App3',
    data() {
        return {
            map: null as any,
            zoom: 12,
            polygonTool: null as any,
            polygonCoordinates: [] as Array<[number, number]>, // 存储多边形坐标集合
            areaResult: '' // 存储面积计算结果
        }
    },
    mounted() {
        this.initMap()
    },
    methods: {
        initMap() {
            try {
                // 确保T对象已加载
                if (!window['T']) {
                    console.error('天地图API加载失败');
                    return;
                }

                const T = window['T'] as any;
                const mapDiv = this.$refs.mapDiv as HTMLElement;

                if (!mapDiv) {
                    console.error('地图容器不存在');
                    return;
                }

                // 初始化地图对象
                this.map = new T.Map(mapDiv)

                // 设置显示地图的中心点和级别
                if (this.map) {
                    this.map.centerAndZoom(new T.LngLat(116.40969, 39.94940), this.zoom)

                    // 允许鼠标双击放大地图
                    this.map.enableScrollWheelZoom()

                    const config = {
                        showLabel: false,
                        color: "blue",
                        weight: 3,
                        opacity: 0.5,
                        fillColor: "#FFFFFF",
                        fillOpacity: 0.5
                    }

                    // 创建标注工具对象
                    this.polygonTool = new T.PolygonTool(this.map, config)

                    // 添加事件监听来获取坐标和面积信息
                    if (this.polygonTool) {
                        // 监听绘制完成事件，获取坐标集合和面积
                        this.polygonTool.addEventListener('draw', (event: any) => {
                            console.log('绘制完成事件触发:', event.currentLnglats);
                            let polygonCoordinates = event.currentLnglats.map((point: any) => [point.lng, point.lat])
                            console.log('获取到的坐标集合:', polygonCoordinates);
                        });
                    }
                }
            } catch (error) {
                console.error('地图初始化失败:', error)
            }
        },
        openPolygonTool() {
            try {
                if (this.polygonTool && typeof this.polygonTool.open === 'function') {
                    this.polygonTool.open()
                }
            } catch (error) {
                console.error('开启测面工具失败:', error)
            }
        },
        closePolygonTool() {
            try {
                if (this.polygonTool && typeof this.polygonTool.close === 'function') {
                    this.polygonTool.close()
                }
            } catch (error) {
                console.error('关闭测面工具失败:', error)
            }
        },
        clearPolygon() {
            try {
                if (this.polygonTool && typeof this.polygonTool.clear === 'function') {
                    this.polygonTool.clear()
                }
            } catch (error) {
                console.error('清除测面工具失败:', error)
            }
        }
    }
})
</script>

<style scoped>
.map-container {
    width: 100%;
    height: 100vh;
    position: relative;
}

#mapDiv {
    width: 100%;
    height: 400px;
}

.control-panel {
    padding: 10px;
}

.control-panel p {
    margin: 0 0 10px 5px;
    font-size: 14px;
    font-family: "Microsoft YaHei";
}

.control-panel input {
    margin-left: 5px;
    font-size: 14px;
    margin-bottom: 10px;
}

.result {
    margin-top: 10px;
    padding: 5px;
    background-color: #f0f0f0;
    border-radius: 4px;
}

.coordinates {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    background-color: #f8f8f8;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
}

.coordinates pre {
    margin: 5px 0;
    white-space: pre-wrap;
    word-break: break-all;
}
</style>
